<template>
  <div class="errorpage">
    <img src="../../assets/error404.png" alt="" style="margin-top: 10%" />
    <h1>您访问的页面不存在，请查看网络连接是否正常，或查看地址输入是否正确</h1>
    <h1>
      The page you visited does not exist Please check whether the network
      connection is normal or check whether the address input is correct
    </h1>
    <span class="promptCss"
      >将在<span class="countCss">{{ count }}</span
      >秒后,自动<el-button class="btnCss" type="text" @click="toHome"
        >返回首页</el-button
      ></span
    >
  </div>
</template>

<script setup>
  import { onMounted } from 'vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()

  // 定时器
  const count = ref(5)
  const timer = ref(null)

  const toHome = () => {
    router.replace({ path: '/' })
}
  
  const timerFn = () => {
    timer.value = setInterval(() => {
      // 创建定时器
      if (count.value === 0) {
        // 关闭定时器
        clearInterval(timer.value)
        router.replace('/home')
        timer.value = null
        count.value = 5
      } else {
        count.value--
      }
    }, 1000)
  }

  onMounted(() => {
    timerFn()
  })
</script>

<style lang="scss" scoped>
  .errorpage {
    text-align: center;

    h1 {
      color: black;
      font-size: 20px;
      font-weight: 700;
      margin: 15px;
    }

    .promptCss {
      font-size: 15px;
      color: #909399;

      .countCss {
        color: #f56c6c;
        font-weight: 600;
        margin: 0 2px;
      }

      .btnCss {
        font-size: 15px;
        margin-left: 2px;
      }

      .el-button {
        padding: 0;
      }
    }
  }
</style>
